<route lang="json5" type="page">
{
  layout: "default",
  style: {
    navigationStyle: "custom",
    navigationBarTitleText: "登录",
  },
}
</route>

<script setup>
const formRef = ref();
const formModel = ref({
  username: "",
  password: "",
});

function handleSubmit() {
  form.value
    .validate()
    .then(({ valid, errors }) => {
      if (valid) {
        showSuccess({
          msg: "校验通过",
        });
      }
    })
    .catch((error) => {
      console.log(error, "error");
    });
}
</script>

<template>
  <view class="login-container">
    <wd-toast />

    <!-- 顶部图标区域 -->
    <view class="header-section">
      <view class="app-icon">
        <image class="logo-image" src="/static/images/jd.png" />
      </view>
      <view class="app-title"> 通用平台 </view>
      <view class="app-subtitle"> 统一平台入口,请登录 </view>
    </view>

    <!-- 登录表单区域 -->
    <view class="form-container">
      <wd-form ref="formRef" :model="formModel">
        <view class="form-header"> 账号登录 </view>

        <view class="input-group">
          <wd-input
            v-model="formModel.username"
            label="用户名"
            prop="username"
            clearable
            placeholder="请输入用户名"
            custom-input-class="custom-input-class"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
        </view>

        <view class="input-group">
          <wd-input
            v-model="formModel.password"
            label="密码"
            prop="password"
            show-password
            clearable
            placeholder="请输入密码"
            custom-input-class="custom-input-class"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </view>
        <view class="login-button-container">
          <wd-button
            custom-class="login-button"
            size="large"
            block
            @click="handleSubmit"
          >
            登录系统
          </wd-button>
        </view>
      </wd-form>
    </view>

    <!-- 底部信息 -->
    <view class="footer-info">
      <text>通用平台 © 2025</text>
    </view>
  </view>
</template>

<style scoped lang="scss">
.login-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, #f5f7fa, #e5eaf2); // 柔和灰蓝背景
  .header-section {
    height: 400rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .app-icon {
      width: 180rpx;
      height: 180rpx;
      background-color: #fff;
      border-radius: 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
      margin-bottom: 30rpx;

      .logo-image {
        width: 140rpx;
        height: 140rpx;
      }
    }
  }
  .form-container {
    flex: 1;
    padding: 0 50rpx;
    .form-header {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 40rpx;
      text-align: center;
    }
    .input-group {
      // width: 100%;
      display: flex;
      align-items: center;
      // justify-content: space-around;
      background-color: #fff;
      margin-bottom: 20rpx;
      box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
      border-radius: 10rpx;
      .wd-input{
        width: 100%;
      }
    }
    .login-button {
      background-color: #4fc3f7; // 清新的浅蓝色
      border-color: #4fc3f7;
      border-radius: 12rpx;
      height: 90rpx;
      line-height: 90rpx;
      color: #fff;
      font-size: 30rpx;
      font-weight: 500;
      box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
    }
  }
  .footer-info {
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>


